<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page import="com.ws.ssmzongjie3.util.Res" %><%--
  Created by IntelliJ IDEA.
  User: bbb
  Date: 2025/3/21
  Time: 15:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<meta charset="UTF-8">
<html>
<head>
    <title>个人信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .profile-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .profile-header img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 10px;
        }
        .profile-header h1 {
            margin: 0;
            font-size: 24px;
            color: #333;
        }
        .profile-header p {
            margin: 5px 0;
            color: #666;
        }
        .profile-details {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .profile-details .detail-item {
            width: 48%;
            margin-bottom: 20px;
        }
        .profile-details .detail-item label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        .profile-details .detail-item input,
        .profile-details .detail-item select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .profile-details .detail-item input[type="password"] {
            font-family: 'Arial', sans-serif;
        }
        .profile-details .detail-item input[type="date"] {
            font-family: 'Arial', sans-serif;
        }
        .profile-details .detail-item input[type="file"] {
            border: none;
            padding: 0;
        }
        .profile-details .detail-item input[type="file"]::before {
            content: '选择头像';
            display: inline-block;
            background: -webkit-linear-gradient(to top, #f9f9f9, #e3e3e3);
            border: 1px solid #999;
            border-radius: 3px;
            padding: 5px 8px;
            outline: none;
            white-space: nowrap;
            -webkit-user-select: none;
            cursor: pointer;
            text-shadow: 1px 1px #fff;
            font-weight: 700;
            font-size: 10pt;
        }
        .profile-details .detail-item input[type="file"]:hover::before {
            border-color: black;
        }
        .profile-details .detail-item input[type="file"]:focus::before {
            border-color: dodgerblue;
        }
        .profile-details .detail-item input[type="file"]:active::before {
            background: -webkit-linear-gradient(to top, #e3e3e3, #f9f9f9);
        }
        .profile-details .detail-item input[type="submit"] {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .profile-details .detail-item input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<style>
    /* 新增面包屑导航样式 */
    .breadcrumb {
        padding: 10px 0;
        margin-bottom: 20px;
        font-size: 14px;
        color: #666;
    }

    .breadcrumb a {
        color: #667eea;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .breadcrumb a:hover {
        color: #764ba2;
    }

    .breadcrumb span {
        margin: 0 5px;
        color: #999;
    }

    /* 更新表单区域背景 */
    .profile-details {
        padding: 20px;
        background: rgba(247, 250, 252, 0.95);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: 1px solid #e2e8f0;
    }
</style>

<script>
    // 判断用户是否为空
    if (${empty user}) {
        if (window.top !== window.self) {
            window.top.location.href = '${pageContext.request.contextPath}/luyou/login'; // 跳出 iframe 并跳转到登录页面
        } else {
            window.location.href = '${pageContext.request.contextPath}/luyou/login'; // 直接跳转到登录页面
        }
    }
</script>
<div class="container">
    <!-- 添加面包屑导航 -->
    <div class="breadcrumb">

        <a href="${pageContext.request.contextPath}/luyou/shouye" onclick="window.top.location.href='${pageContext.request.contextPath}/luyou/shouye'; return false;">首页</a>

        <span>&gt;</span>
        <span>个人中心</span>
    </div>


    <form id="profileForm" action="${pageContext.request.contextPath}/user/xiugaixinxi" method="post" enctype="multipart/form-data">
        <div class="profile-header">
            <label for="u_avatar" style="cursor: pointer;">
                <img src="<%=Res.fileUrl%>${user.u_avatar}" alt="头像" id="avatarPreview">
            </label>
            <input type="file" id="u_avatar" name="image" style="display: none;" accept="image/*"> <!-- 确保name属性为image -->
            <h1>${user.u_name}</h1>
            <p>注册时间: <fmt:formatDate value="${user.u_birthday}" pattern="yyyy-MM-dd"/></p>
            <div style="display: flex; justify-content: center;"> <!-- 移除gap，使用margin -->
                <button type="button" id="editBtn" class="btn btn-primary" style="margin-right: 2px;">编辑信息</button>
                <button type="button" id="changePasswordBtn" class="btn btn-warning" style="margin-left: 2px;">修改密码</button>
            </div>
            <button type="button" id="cancelBtn" class="btn btn-secondary" style="display: none;">取消编辑</button>
        </div>

        <div class="profile-details">
            <input type="hidden" name="pd" value="1" readonly>
<%--            //隐藏id--%>
            <input type="hidden" name="user_id" id="user_id" value="${user.user_id}">
            <div class="detail-item">
                <label for="username">用户名</label>
                <input type="text" id="username" name="u_name" value="${user.u_name}" readonly onblur="checkUsername()">
            </div>

            <div class="detail-item">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="u_email" value="${user.u_email}" readonly>
            </div>
            <div class="detail-item">
                <label for="phone">手机号</label>
                <input type="tel" id="phone" name="u_phone" value="${user.u_phone}" readonly>
            </div>
            <div class="detail-item">
                <label for="birthday">生日</label>
                <input type="date" id="birthday" name="u_birthday" value="<fmt:formatDate value="${user.u_birthday}" pattern="yyyy-MM-dd"/>" readonly>
            </div>
            <div class="detail-item" style="width: 100%; text-align: center;">
                <button type="submit" id="saveBtn" class="btn btn-success" style="display: none;">保存更改</button>
            </div>
        </div>
    </form>
</div>

<script>
// 切换编辑模式


// 确保toggleEditMode函数存在
let originalData = {}; // 用于保存原始数据
let inputs = document.querySelectorAll('#profileForm input[type="text"], #profileForm input[type="email"], #profileForm input[type="tel"], #profileForm input[type="date"]');

function toggleEditMode(isEdit) {
    // 在函数内部重新定义inputs变量
    

    const fileInput = document.getElementById('u_avatar');
    const avatarPreview = document.getElementById('avatarPreview');
    const editBtn = document.getElementById('editBtn');
    const cancelBtn = document.getElementById('cancelBtn');
    const saveBtn = document.getElementById('saveBtn');

    inputs.forEach(input => input.readOnly = !isEdit);
    fileInput.disabled = !isEdit; // 根据编辑状态启用/禁用文件输入
    fileInput.style.display = isEdit ? 'block' : 'none';
    avatarPreview.style.display = isEdit ? 'none' : 'block';
    editBtn.style.display = isEdit ? 'none' : 'block';
    editBtn.disabled = false; // 确保编辑按钮始终可用
    cancelBtn.style.display = isEdit ? 'block' : 'none';
    saveBtn.style.display = isEdit ? 'block' : 'none';
}

// 头像预览




// 文件选择事件
let isEditing = false; // 添加编辑状态标志

// 修改头像点击事件
document.getElementById('avatarPreview').addEventListener('click', function(event) {
    if (!isEditing) {
        event.preventDefault();
        event.stopPropagation();
        alert('请先点击"编辑信息"按钮');
        return false;
    }
    // 移除直接触发文件输入框点击的逻辑
});

// 修改文件输入框控制
const fileInput = document.getElementById('u_avatar');
fileInput.style.pointerEvents = isEditing ? 'auto' : 'none';
fileInput.style.position = 'absolute';
fileInput.style.left = '-9999px'; // 将文件输入框移出可视区域
fileInput.disabled = !isEditing; // 根据编辑状态启用/禁用文件输入

// 添加文件选择事件监听器
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const avatarPreview = document.getElementById('avatarPreview');
            avatarPreview.src = e.target.result;
        };
        reader.readAsDataURL(file);
    } else {
        // 如果未选择文件，恢复原始头像
        const avatarPreview = document.getElementById('avatarPreview');
        avatarPreview.src = "<%=Res.fileUrl%>${user.u_avatar}";
    }
});

// 在toggleEditMode函数中添加对文件输入框的控制
function toggleEditMode(isEdit) {
    isEditing = isEdit;
    const fileInput = document.getElementById('u_avatar');
    const avatarPreview = document.getElementById('avatarPreview');
    const editBtn = document.getElementById('editBtn');
    const cancelBtn = document.getElementById('cancelBtn');
    const saveBtn = document.getElementById('saveBtn');
    const changePasswordBtn = document.getElementById('changePasswordBtn'); // 获取修改密码按钮

    inputs.forEach(input => input.readOnly = !isEdit);
    fileInput.style.pointerEvents = isEdit ? 'auto' : 'none';
    fileInput.style.position = isEdit ? 'static' : 'absolute';
    fileInput.style.left = isEdit ? '0' : '-9999px';
    fileInput.disabled = !isEdit;
    avatarPreview.style.display = 'block';
    fileInput.style.display = 'none';
    editBtn.style.display = isEdit ? 'none' : 'block';
    cancelBtn.style.display = isEdit ? 'block' : 'none';
    saveBtn.style.display = isEdit ? 'block' : 'none';
    changePasswordBtn.style.display = isEdit ? 'none' : 'block'; // 控制修改密码按钮的显示
}

// 文件输入框关闭时重置标志
document.getElementById('u_avatar').addEventListener('click', function() {
    isFileDialogOpen = false;
});

// 绑定按钮事件
document.getElementById('editBtn').addEventListener('click', () => toggleEditMode(true));
// 绑定取消编辑按钮事件
document.getElementById('cancelBtn').addEventListener('click', () => {
    // 恢复原始数据
    inputs.forEach(input => {
        switch (input.id) {
            case 'username':
                input.value = "${user.u_name}"; // 从作用域中恢复用户名
                break;
            case 'email':
                input.value = "${user.u_email}"; // 从作用域中恢复邮箱
                break;
            case 'phone':
                input.value = "${user.u_phone}"; // 从作用域中恢复手机号
                break;
            case 'birthday':
                input.value = "<fmt:formatDate value="${user.u_birthday}" pattern="yyyy-MM-dd"/>"; // 从作用域中恢复生日
                break;
        }
    });
    
    // 恢复头像
    const avatarPreview = document.getElementById('avatarPreview');
    avatarPreview.src = "<%=Res.fileUrl%>${user.u_avatar}";
    
    // 退出编辑模式
    toggleEditMode(false);
});

// 绑定修改密码按钮事件
document.getElementById('changePasswordBtn').addEventListener('click', function() {
    // 跳转到修改密码页面
    window.location.href = '${pageContext.request.contextPath}/user/mima';
});

// 合并后的用户名检查方法
function checkUsername(isSubmit = false) {
    const usernameInput = document.getElementById('username');
    const username = usernameInput.value.trim();
    const userIdInput = document.getElementById('user_id');
    const userId = userIdInput.value;

    // 检查用户名是否为空
    if (username === '') {
        showMessage('用户名不能为空', 'error');
        if (isSubmit) {
            event.preventDefault(); // 如果是表单提交，阻止提交
        }
        return false;
    }

    // 发送 AJAX 请求检查用户名是否重复
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '${pageContext.request.contextPath}/user/checkUsername?username=' + encodeURIComponent(username) + '&userId=' + encodeURIComponent(userId), !isSubmit); // 同步或异步请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.exists) {
                showMessage('用户名已存在，请选择其他用户名', 'error');
                if (isSubmit) {
                    event.preventDefault(); // 如果是表单提交，阻止提交
                } else {
                    // usernameInput.value = ''; // 清空用户名输入框
                }
            } else if (!isSubmit) {
                showMessage('用户名可用', 'success');
            }
        }
    };
    xhr.send();
}

// 表单提交事件
document.getElementById('profileForm').addEventListener('submit', function (event) {
    checkUsername(true); // 调用合并后的方法，传入 isSubmit 为 true
});

// 用户名输入框失去焦点事件
document.getElementById('username').addEventListener('blur', function () {
    checkUsername(); // 调用合并后的方法，传入 isSubmit 为 false
});

// 显示提示信息
function showMessage(message, type) {
    const messageDiv = document.createElement('div');
    messageDiv.textContent = message;
    messageDiv.style.position = 'fixed';
    messageDiv.style.top = '20px';
    messageDiv.style.left = '50%';
    messageDiv.style.transform = 'translateX(-50%)';
    messageDiv.style.padding = '10px 20px';
    messageDiv.style.borderRadius = '4px';
    messageDiv.style.color = '#fff';
    messageDiv.style.zIndex = '1000';
    messageDiv.style.backgroundColor = type === 'error' ? '#ff4444' : '#00C851';
    document.body.appendChild(messageDiv);

    // 3秒后自动消失
    setTimeout(() => {
        document.body.removeChild(messageDiv);
    }, 3000);
}

</script>

</body>
</html>

<style>
    /* 更新profile-header样式 */
    .profile-header {
        background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
        padding: 30px;
        border-radius: 12px;
        color: white;
        margin-bottom: 30px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        text-align: center;
        position: relative;
    }

    .profile-header img {
        border: 4px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        margin: 0 auto;
        display: block;
    }

    /* 新增按钮和文件输入框居中样式 */
    .profile-header .btn,
    .profile-header input[type="file"] {
        margin: 10px auto;
        display: block;
    }

    .profile-header h1 {
        color: white;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .profile-header p {
        color: rgba(255, 255, 255, 0.9);
    }

    /* 更新表单样式 */
    .profile-details {
        padding: 20px;
        background: rgba(247, 250, 252, 0.95);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: 1px solid #e2e8f0;
    }

    .detail-item {
        margin-bottom: 20px;
    }

    .detail-item label {
        color: #4a5568;
        font-size: 14px;
        margin-bottom: 8px;
        font-weight: 500;
    }

    
        /* 更新输入框样式 */
        .detail-item input,
        .detail-item select {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 14px;
            transition: all 0.3s ease;
            background-color: #ffffff;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
            color: #4a5568;
        }

        .detail-item input:not([type="file"]):hover,
        .detail-item select:hover {
            border-color: #a0aec0;
        }

        .detail-item input:focus,
        .detail-item select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            outline: none;
        }

        .detail-item input[type="date"] {
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23667eea" d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zM5 7V5h14v2H5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 18px;
            padding-right: 40px;
        }

        .detail-item input[type="file"] {
            position: relative;
            height: 40px;
            opacity: 0;
        }

        .detail-item input[type="file"]::before {
            content: '选择头像';
            position: absolute;
            left: 0;
            top: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .detail-item input[type="file"]:hover::before {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
        }


    .detail-item input:focus,
    .detail-item select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        background-color: #ffffff;
    }

    /* 更新按钮样式 */
    .btn {
        border-radius: 8px;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer; /* 确保鼠标指针变为手型 */
        pointer-events: auto; /* 确保按钮可以接收点击事件 */
        opacity: 1; /* 确保按钮不透明 */
    }

    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
    }

    .btn-secondary {
        background: #edf2f7;
        color: #4a5568;
    }

    .btn-secondary:hover {
        background: #e2e8f0;
    }

    .btn-success {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
    }

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(72, 187, 120, 0.2);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .detail-item {
            width: 100%;
        }
        
        .container {
            padding: 20px;
        }
        
        .profile-header {
            padding: 20px;
        }
    }
</style>
